<template>
	<m-layout title="收银台" class="surePay" barBg="unset" color="#fff">
		<view class="main">
			<view class="top-msg">
				<m-text block ftsize="28" color="#fff">实付金额</m-text>
				<view class="h2 flex-center">
					<m-number leftText="￥" :value="price" weight="600" size="68 36" color="#fff" />
				</view>
				<m-block class="countdown flex-center" gap="14 0" radius="0" bgColor="unset">
					<m-icon type="icon-shijian" color="#fff" spa="0 15 0 0"></m-icon>
					<text>剩余支付时间：</text>
					<uni-countdown :showDay="false" :showH="false" ref='countDowns' :timestamp="timestamp"
						:font-size="30" @timeup="timeOunt" :show-colon="false" />
				</m-block>
			</view>
			<m-block gap="30" spa="70 0 0" @click="isvUsdt = !isvUsdt" v-if="payType['payType'] == 3">
				<view class="flex-between">
					<m-icon wh="52" color="#06B4FD" spa="8 24 0 0" type="wx" />
					<view class=" flex-1">
						<m-text block ftsize="30" weight="800">微信支付</m-text>
					</view>
					<m-icon type="icon-xuanzhong_-01" wh="40" color="var(--theme)"></m-icon>
				</view>
				<m-text ftsize="24" color="#999"></m-text>
			</m-block>
			<!-- <payType v-model="payType" ref="payList" class="pay-list"></payType> -->
		</view>
		<!-- <m-pay :loading="payLoading" class="pay-popop" title="请输入支付密码" v-model="payShow" :showCancel="true"
			@handleConfirm="propCreat" @handleCancel="payShow = false">
		</m-pay> -->
		<view class="btn-box" v-if="!payState">
			<view class="box">
				<m-button block @click="verify" :loading="payLoading">确认支付</m-button>
			</view>
		</view>
		<uni-popup ref="copyShow" type="center" :maskClick="false">
			<view class="copy-popup flex-column">
				<view class="center flex-center"><text>请确认支付是否已完成</text></view>
				<view class="copyShow-btn-box flex-between">
					<text @click="$refs.copyShow.close()">继续支付</text>
					<text>已完成支付</text>
				</view>
			</view>
		</uni-popup>
	</m-layout>
</template>

<script>
	import { buyStoreManager, Recharg_wx_cny, Recharg_jf } from '@/api/Trade.js'
	import { mapState } from 'vuex'
	import { wxPayment } from '@/api/Ctrls.js'
	import { balance } from '@/api/Users.js'
	import { openWx } from '@/utils/tools.js'
	export default {
		data() {
			return {
				payState: true, //是否支付成功
				params: {},
				price: 0,
				id: '',
				filterArr: [],
				onlyArr: [],
				isChecked: true,

				isLoading: false,
				payShow: false,
				payLoading: false,

				item: {},
				item2: [],
				payMsg: {},
				payType: {
					payType: 3,
					type: 1 //1表示在线支付  2表示银行卡
				}, //默认余额支付
				timestamp: -1, //倒计时
			};
		},
		onLoad(params) {
			this.params = params;
			this.params = params;
			console.log('params', params)
			const { price, id } = params;
			this.price = price
			this.id = id;
			this.wxPayment()
			setTimeout(() => {
				this.timestamp = 60 * 30;
			}, 200)
		},
		// onLoad() {
			
		// },
		computed: {
			...mapState({
				userbalance: state => state.user.userbalance,
				config: state => state.general.config,
				enum: state => state.general.enum,
				devSetAppUser: state => state.temporary.devSetAppUser,
			}),
			Coin() {
				return this.enum['Coin']
			},
			isIntegral() {

				this.payType = {
					payType: 3,
					type: 1 //1表示在线支付  2表示银行卡
				}
				return true
			},
		},
		methods: {
			async wxPayment() {
				console.log(12312123)
				const { data, success } = await wxPayment(this.id)
				if (success) {
					const res = await this.payment(JSON.parse(data))
					this.payState = res
					if (res) {
						this.Jump({
							url: '/pages/home/home',
							mode: 4
						})
					}
				}
			},
			async verify() {
				this.wxPayment();
			},

			//  创建 订单
			async creat(pwd = '') {
				try {
					const methods = this.params['methods']
					const Paytype = Number(this.payType['payType']) //当前选择的支付类型
					const nowPaytype = Paytype //当前选择的支付类型
					const params = {
						paypassword: pwd,
						paytype: nowPaytype,
						...this.params,
						stype: Number(this.params['stype']),
					}

					if (methods == 'buyStoreManager') {
						params.data = this.devSetAppUser
					}

					const meth = {
						buyStoreManager: buyStoreManager,
						buyCard: buyCard,
						Recharg_jf: Recharg_jf
					} [methods]
					this.payLoading = true;
					const { success, msg, data } = await meth(params)
					this.Toast(msg)
					this.payLoading = false;
					//失败不继续
					if (!success) return

					//微信支付时
					if (nowPaytype == 11 || nowPaytype == 21) {
						console.log(data)
						return
						openWx({
							methods: 'Recharg_jf',
							data: data
						})

						return

						const res = await this.payment(data)
						console.log(res)
						return
					}
					await this.sleep(1000)
					if (methods == 'buyStoreManager') {
						this.Jump({
							url: '/pages/mine/mine',
							mode: 4
						})
					}
					if (methods == 'Recharg_jf') {
						this.Jump()
					}
					if (methods == 'buyCard') {
						this.Jump({
							url: '/pages/coupon/coupon2',
							mode: 2
						})
					}
				} catch (e) {

					console.log(e)
					//TODO handle the exception
				}
			},
			//支付弹窗带入密码
			async propCreat({ pwd }) {
				console.log(pwd)
				this.paypassword = pwd;
				//关闭密码框
				this.payShow = false;
				this.creat(pwd);
			},
			// 倒计时
			timeOunt() {
				console.log("结束")
				setTimeout(async () => {
					// this.getData();
				}, 500)
			},


		},
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(0deg, #856BFF 0%, #A592FF 100%) #f6f6f6 no-repeat;
		background-size: 750rpx 560rpx;
	}

	.bank-box {
		/deep/ .pay-box {
			padding: 0rpx !important;
			box-sizing: border-box;

			.form-items {

				padding: 0 30rpx 0rpx;

				.from-item {
					width: 100%;
					padding-left: 20rpx;
					width: 521rpx;
					background: #F6F6F6;
					border: 1px solid #D1D1D1 !important;
					border-radius: 15rpx;
				}
			}
		}

		/deep/ .dialog-footer {
			padding: 0 30rpx 0rpx;
		}

		.top-bg {
			width: 100%;
			height: 300rpx;
			background: linear-gradient(0deg, #F1F5FF 0%, #FFFFFF 100%);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
		}

		.dialog-box {
			text-align: left;
			padding: 30rpx 30rpx;

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}



	.surePay {
		.countdown {
			padding-bottom: 30rpx;

			text {
				font-size: 24rpx !important;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff !important;
				padding-right: 5rpx;
			}

			/deep/ .uni-countdown {

				display: inline-flex !important;
				justify-content: center;
				align-items: center;



				.uni-countdown__number {
					line-height: unset !important;
					width: unset !important;
					display: inline !important;
					font-size: 24rpx !important;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff !important;
				}

				.uni-countdown__splitor {
					font-size: 28rpx !important;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff !important;
				}
			}
		}

		.main {

			border-radius: 0 0 20rpx 20rpx;
		}

		.top-msg {
			padding: 30rpx 0;
			text-align: center;

			.h1 {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
			}

			.h2 {
				padding: 20rpx 0 0;
				align-items: flex-end;

				.m-number {
					/deep/ .left-unit {
						font-size: 36rpx !important;
					}
				}


				.p2 {
					padding-left: 20rpx;
					padding-bottom: 20rpx;
					font-size: 64rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fff;
				}
			}


			.h4 {}
		}

		.jf {
			box-shadow: 0px 0px 10rpx 1px rgba(0, 0, 0, 0.06);

			.jf-box {
				padding: 24rpx 0;

				.box {
					flex: 1;
				}

				text:nth-of-type(1) {
					padding-left: 20rpx;
					font-size: 30rpx;
					font-family: SourceHanSansCN-Normal-, SourceHanSansCN-Normal;
					font-weight: normal;
					color: #1A1A1A;
				}

				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.jf-box+.jf-box {
				border-top: 1px solid #EEEEEE;
			}
		}


		.pay-type {
			padding-top: 50rpx;

			.titles {
				padding-bottom: 25rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.hint {
			padding: 50rpx 24rpx 20rpx;

			text {
				font-size: var(--fs_28);
				color: var(--text_1);
			}

			.yhxy {
				color: var(--theme);
			}
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			.box {
				margin-top: 24rpx;
				padding: 24rpx;
				background: #fff;
			}
		}

		.pay-popop {
			/deep/ .title {
				margin-bottom: 0;
			}
		}

		.copy-popup {
			width: 582rpx;
			height: 264rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.center {
				flex: 1;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.copyShow-btn-box {
				border-top: 1rpx solid #eeeeee;

				text {
					display: inline-block;
					flex: 1;
					text-align: center;
					padding: 26rpx 0;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				text:nth-of-type(2) {
					border-left: 1rpx solid #eeeeee;
					color: #FF2323;
				}
			}
		}
	}
</style>